<template>
	<view class="content">
		<uni-nav-bar :statusBar="true" dark title="详细资料" left-icon="left" fixed @clickLeft="clickLeft"	>
			
		</uni-nav-bar>
		<view class="box">
			<uni-forms class="form" ref="baseForm" :modelValue="baseFormData">
				<uni-forms-item labelWidth="210rpx" label="联赛名称" required>
					<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item labelWidth="210rpx" label="主办方" required>
					<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item labelWidth="210rpx" label="对外联系人" required>
					<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item labelWidth="210rpx" label="对外联系方式" required>
					<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item labelWidth="210rpx" label="赛事简介" required>
					<uni-easyinput type="textarea" v-model="baseFormData.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item class="noneboxLine" labelWidth="210rpx" label="简介图片" required>
					<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
				</uni-forms-item>
				<uni-forms-item class="topCenter noneboxLine" labelWidth="200px" label="按联赛类型(可多选)" required>
					<view class="selectType">
						<view>幼儿</view>
						<view>小篮球</view>
						<view>小学</view>
						<view>初中高</view>
						<view>官方</view>
						<view>企业</view>
					</view>
				</uni-forms-item>
				<uni-forms-item class="topCenter noneboxLine" labelWidth="200px" label="按参与人员(可多选)" required>
					<view class="selectType">
						<view>幼儿（0-6）</view>
						<view>青少年（1-17）</view>
						<view>青年（18-35）</view>
						<view>壮年（36-45）</view>
						<view>自由职业者</view>
						<view>企业单位员</view>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
		
		<view class="bottomBtn">
			<view class="submit-text">
				<checkbox-group >
					<label>
						<checkbox class="chekedBox" active-background-color="#EC7044" color="#FFCC33" value="cb" checked="true" />
						<text class="text-grey1">我已阅读并同意 </text>
					</label>
				</checkbox-group><text class="font-color-def">《赛事服务协议》</text>
			</view>
			<button @click="onCreated" type="submit" class="submit">
				提交
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseFormData: {}
			}
		},
		methods: {
			onCreated() {
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			clickLeft() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
.content {
	.box {
		padding: 30rpx;
	}
	.topCenter {
		flex-direction: column !important;
	}
	.selectType {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		view {
			display: flex;
			align-items: center;
			padding: 10rpx 20rpx;
			background: #f0f0f0;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
	}
	
	.bottomBtn {
		display: flex;
		justify-content: center;
		flex-direction: column;
		background-color: #fff;
		position: sticky;
		bottom: 0;
		padding: 40rpx 30rpx;
		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
		border-top: 1px solid #eee;
		.submit-text {
			display: flex;
			
			font-size: 24rpx;
		}
		.submit {
			background-color: $btn-bg-color;
			color: #fff;
			width: 100%;
			font-size: 34rpx;
			font-weight: 800;
			margin-top: 20rpx;
		}
		
		::v-deep uni-checkbox-group {
			display: inline-block;
			
		}
		.chekedBox {
			margin-right: 10px;
			::v-deep.uni-checkbox-input {
				border-radius: 100%;
			}
			&::before{
				font-size: 12px;
				right: 3px;
			}
			::v-deep.uni-checkbox-input {
				width: 16px;
				height: 16px;
			}
		}
	}
}
</style>
